<template>
  <view class="popup">
    <view class="header">绑定门店</view>
    <view class="tip ">输入门店账号密码完成本企微账号和门店的关联</view>
    <view class="content">
      <up-input class="input" v-model="formData.username" placeholder="请输入账号" inputBorder></up-input>
      <up-input class="input" v-model="formData.password" type="password" placeholder="请输入密码" inputBorder></up-input>
      <up-button type="primary" @click="handleSubmit" shape="circle">立即关联</up-button>
    </view>
    <view class="tips">注意:门店和企业微信员工为一对一关联，即一共员工仅可关联一个门店，一个门店也只可关联一个企微员工</view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { bindStoreApi } from '../../api';
import { setQyworkToken } from '../../utils/storage';
import { redirect } from '@/utils/common';

const route = useRoute()
const formData = ref({
  username: '',
  password: ''
})

async function handleSubmit() {
  const res:any = await bindStoreApi(formData.value)
  const { token, ...memberInfo } = res.data
  uni.showToast({ title: '绑定成功' })
  setQyworkToken(token)
  uni.setStorageSync('qywork_member_info', memberInfo)

  redirect({
    url: route.query.redirect,
    mode: 'redirectTo'
  })
  

}

</script>

<style lang="scss" scoped>
.popup {
  background: #fff url(http://static-d9.zangft.com/cb3dccd952fdcd41/6c81af5ef106952f.jpg) no-repeat;
  background-size:100% 100%;
  box-sizing: border-box;
  padding: 40rpx;
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
  position: relative;
  padding: 200rpx 60rpx;
  box-sizing: border-box;
  
  .header {
    font-size: 40rpx;
    font-weight: bold;
  }
  .tip {

    font-size: 28rpx;
    color: #333;
  }

  .tips {
    font-size: 28rpx;
    color: #fff;
    padding: 20rpx;
    background-color: rgba($color: #000000, $alpha: 0.3);
    border-radius: 24rpx;
  }

  .content {
    padding: 40rpx 0;
    .input {
      margin-bottom: 30rpx;
      background-color: #fff;
    }
  }
}
</style>
